<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <input id="button" type="button" value="点我">
    <br>
    <br>

    <!--网页事件-->
    <!--1.事件处理器属性-->
    <input id="onclick-attr" type="button" value="单击">
    <input id="ondblclick-attr" type="button" value="双击">
    <input id="onkeypress-attr" type="button" value="按下并松开键盘">
    <input id="onkeydown-attr" type="button" value="按下键盘">
    <input id="onkeyup-attr" type="button" value="松开键盘">
    <input id="onmouseover-attr" type="button" value="鼠标移入">
    <input id="onmouseout-attr" type="button" value="鼠标移出">
    <input id="onfocus-attr" type="button" value="获取焦点">
    <input id="onblur-attr" type="button" value="失去焦点">
    <br>
    <br>
    <!--2.内联事件处理器-->
    <input type="button" value="单击" onclick="alert('单击')">
    <input type="button" value="双击" ondblclick="alert('双击')">
    <input type="button" value="按下并松开键盘" onkeypress="alert('按下并松开键盘')">
    <input type="button" value="按下键盘" onkeydown="alert('按下键盘')">
    <input type="button" value="松开键盘" onkeyup="alert('松开键盘')">
    <input type="button" value="鼠标移入" onmouseover="alert('鼠标移入')">
    <input type="button" value="鼠标移出" onmouseout="alert('鼠标移出')">
    <input type="button" value="获取焦点" onfocus="alert('获取焦点')">
    <input type="button" value="失去焦点" onblur="alert('失去焦点')">
    <br>
    <br>
    <!--3.addeventlistener & removeeventlistener-->
    <input id="add-event" type="button" value="添加事件">
    <input id="remove-event" type="button" value="移除事件">
    <br>
    <br>
    <input id="one-to-many-attr" type="button" value="点我">
    <input id="one-to-many-function" type="button" value="点我">
    <br>
    <br>


    <!--事件对象-->
    <input id="event-object-click" type="button" value="事件对象-单击">
    <input id="event-object-keypress" type="button" value="事件对象-键盘">
    <br>
    <br>


    <!--阻止默认行为-->
    <form>
      用户名：<input id="uname" type="text">
      密 码：<input id="upwd" type="text">
      <input id="submit" type="submit">
    </form>
    <br>
    <br>


    <!--事件冒泡以捕获-->
    <div id="parent-div" style="height: 100px;width: 100px;background-color: pink;cursor: pointer">
      <div id="son-div" style="height: 50px;width: 50px;background-color: skyblue;cursor: pointer"></div>
    </div>
  </body>

  <script>
      document.querySelector('#button').onclick = function () {
          alert('你点了我');
      }


      document.querySelector('#onclick-attr').onclick = function () {
          alert('单击');
      }
      document.querySelector('#ondblclick-attr').ondblclick = function () {
          alert('双击');
      }
      document.querySelector('#onkeypress-attr').onkeypress = function (event) {
          alert('按下并松开按钮');
      }
      document.querySelector('#onkeydown-attr').onkeydown = function (event) {
          alert('按下按钮');
      }
      document.querySelector('#onkeyup-attr').onkeyup = function (event) {
          alert('松开按钮');
      }
      document.querySelector('#onmouseover-attr').onmouseover = function () {
          alert('鼠标移入');
      }
      document.querySelector('#onmouseout-attr').onmouseout = function () {
          alert('鼠标移出');
      }
      document.querySelector('#onfocus-attr').onfocus = function () {
          alert('获取焦点');
      }
      document.querySelector('#onblur-attr').onblur = function () {
          alert('失去焦点');
      }


      document.querySelector('#add-event').addEventListener('click', function () {
          alert('添加事件')
      })
      var eventFun = function () {
          alert('添加事件');
      };
      document.querySelector('#remove-event').addEventListener('click', eventFun);
      setTimeout(function () {
          document.querySelector('#remove-event').removeEventListener('click', eventFun);
          alert('事件被移除');
      }, 5000);


      var func1 = function () {
          alert('处理器1');
      }
      var func2 = function () {
          alert('处理器2');
      }
      document.querySelector('#one-to-many-attr').onclick = func1();
      document.querySelector('#one-to-many-attr').onclick = func2();
      document.querySelector('#one-to-many-function').addEventListener('click', func1);
      document.querySelector('#one-to-many-function').addEventListener('click', func2);


      document.querySelector('#event-object-click').addEventListener('click', function (e) {
          console.log(e)
      });
      document.querySelector('#event-object-keypress').addEventListener('keypress', function (event) {
          event = event || window.event;//兼容
          var keycode = event.keyCode;//键码
          console.log(keycode)
          console.log(String.fromCharCode(keycode));//转成字符
      });


      document.querySelector('form').onsubmit = function (e) {
          if (document.getElementById('uname').value === '' || document.getElementById('upwd').value === '') {
              e.preventDefault();
              alert('阻止默认行为成功')
          }
      }


      document.querySelector('#parent-div').addEventListener('click', function () {
          alert('父盒子被点击')
      });
      document.querySelector('#son-div').addEventListener('click', function (e) {
          e.stopPropagation();
          alert('子盒子被点击')
      });
  </script>
</html>